<!--图片上传组件相关属性和方法说明
  action：上传的图片后端服务器的地址 
  multiple	是否支持多选文件	boolean 
  list-type	文件列表的类型	string	text/picture/picture-card
    on-preview	点击文件列表中已上传的文件时的钩子	function(file)
    on-remove	文件列表移除文件时的钩子	function(file, fileList)
    on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
    on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
    on-progress	文件上传时的钩子	function(event, file, fileList)
-->
<template>
    <div class="uploading">
        <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="uploadSuccesshandle"
            :file-list="fileList"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <!--预览图片-->
        <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import {uploadUrl,host} from '@/api/base'    //uploadUrl:api/upload host: http://localhost:9898
  export default {
    props:{  //接收父组件传递的url
      fileList:{
        type:Array,
        default:function(){
          return []
        }
      }
    },
    data() {
      return {
        uploadUrl:uploadUrl,
        host:host,
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      //图片上传成功之后的回调
      uploadSuccesshandle(response, file, fileList){
        console.log("图片上传成功",response, file, fileList)  //response:{name: "wechat_20250516194638.jpg",res_code: "0",url: "upload\\1754748458634-wechat_20250516194638.jpg"} file:包含response和大小，状态等信息 fileList：一次上传多个文件信息
        const url = response.url.slice(7)
        const save_url = host +'/'+ url
        console.log("服务器生成的文件路径为：",save_url) //将url传递给父组件进行回显
        this.$emit("sendImgUrl",save_url)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>